<template>
  <div class="system-dic-container">
    <el-card shadow="hover">
      <!--   搜索部分   -->
      <div class="system-user-search mb15">
        <el-input size="small" v-model="searchName" placeholder="请输入字典名称" style="max-width: 180px"></el-input>
        <el-button size="small" type="primary" @click="getDictList" class="ml10" icon="el-icon-search">查询</el-button>
        <el-button size="small" type="success" class="ml10" icon="el-icon-folder-add" @click="onOpenAddDic">新增字典
        </el-button>
        <el-button size="small" type="success" class="ml10" icon="el-icon-upload2" @click="exportData">导出数据</el-button>
        <el-button size="small" type="success" class="ml10" icon="el-icon-download" @click="dialogVisible = true">导入数据
        </el-button>
      </div>

      <!--  表格数据部分    -->
      <el-table :data="dictList" style="width: 100%" row-key="id"
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column type="index" label="序号" width="100"/>
        <el-table-column prop="name" label="字典名称" width="200px" show-overflow-tooltip>
          <template #default="scope">
            <i :class="scope.row.name" v-if="scope.row.parentId==82009"></i><span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="字典值" show-overflow-tooltip></el-table-column>
        <el-table-column prop="isDeleted" label="字典状态" show-overflow-tooltip>
          <template #default="scope">
            <el-tag type="success" v-if="scope.row.isDeleted">启用</el-tag>
            <el-tag type="info" v-else>禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="builder" label="创建者" show-overflow-tooltip></el-table-column>
        <el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button size="small" type="text" @click="onOpenEditDic(scope.row)">修改</el-button>
            <el-button size="small" type="text" @click="onRowDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </el-card>

    <!--  新增修改  -->
    <el-dialog :title="title" :visible.sync="isShowDialog" width="769px" :before-close="handleClose">
      <el-form :model="ruleForm" size="small" label-width="90px">
        <el-row :gutter="35">
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="字典名称">
              <el-input v-model="ruleForm.name" placeholder="请输入字典名称" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="字典值">
              <el-input v-model="ruleForm.value" placeholder="请输入字典值" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="字典编码">
              <el-input v-model="ruleForm.dictCode" placeholder="请输入字典编码,允许不填" maxlength="150" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
            <el-form-item label="父字典">
              <el-select v-model="ruleForm.parentId" style="width: 100%" placeholder="请选择,不选默认为顶级字典" clearable>
                <el-option
                    v-for="item in dicts"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
            <el-form-item label="字典状态">
              <el-switch v-model="ruleForm.isDeleted" inline-prompt active-text="启" inactive-text="禁"></el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="small">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="small">确 定</el-button>
				</span>
      </template>
    </el-dialog>

    <el-dialog
        title="导入"
        :visible.sync="dialogVisible"
        width="30%"
    >
      <el-upload
          style="margin: 0 auto"
          class="upload-demo"
          action="http://localhost/api/system/dict/importData"
          :multiple="false"
          :on-success="onUploadSuccess"
      >
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import dict from '@/api/dict'

export default {
  name: "systemDict",
  data() {
    return {
      title: "", // 对话框显示title
      dictList: [], // 表格显示数据字典信息
      isShowDialog: false, // 新增字典对话框是否显示
      ruleForm: {}, // 表单数据
      dicts: [], // 用于下拉框显示数据
      searchName: "", // 搜索条件
      dialogVisible: false,
    }
  },
  created() {
    this.getDictList()
  },
  methods: {
    // 文件上传成功回调
    onUploadSuccess() {
      // 更新数据
      this.getDictList(1)
      this.$message({
        message: '文件已导入！',
        type: 'success'
      })
    },
    // 点击新增字典显示对话框
    onOpenAddDic() {
      this.title = "新增字典"
      this.getDictListById()
      this.isShowDialog = true
    },
    // 修改数据字典
    onOpenEditDic(row) {
      this.title = "修改字典"
      // 解除编辑时的双向绑定
      let stringify = JSON.stringify(row); //转成字符串
      this.ruleForm = JSON.parse(stringify);//转回去
      this.getDictListById()
      this.isShowDialog = true
    },
    // 删除数据字典
    onRowDel(row) {
      this.$confirm('此操作将永久删除该字典数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        dict.deleteDictById(row).then(resp => {
          this.$message({type: 'success', message: '删除成功!'});
          this.getDictList()
        })
      }).catch(() => {
        this.$message({type: 'info', message: '已取消删除'});
      });
    },
    // 获取数据字典信息
    getDictList() {
      dict.getDictList(this.searchName).then(resp => {
        this.dictList = resp.data
      })
    },
    // 点击取消新增字典
    onCancel() {
      this.ruleForm = {}
      this.isShowDialog = false
    },
    // 提交新增和修改字典
    onSubmit() {
      this.ruleForm.builder = this.$store.state.userInfos.userInfos.userName
      if (this.title == "新增字典") {
        if (this.ruleForm.parentId == undefined) this.ruleForm.parentId = 0
        dict.insertDict(this.ruleForm).then(resp => {
          this.$message({message: resp.message, type: 'success'});
        })
      } else {
        dict.updateDict(this.ruleForm).then(resp => {
          this.$message({message: resp.message, type: 'success'});
        })
      }
      this.ruleForm = {}
      this.getDictList()
      this.isShowDialog = false
    },
    // 获取下拉框需要的数据
    getDictListById() {
      dict.getDictListById(0).then(resp => {
        this.dicts = resp.data
      })
    },
    // 对话框关闭时触发
    handleClose(done) {
      this.ruleForm = {}
      done();
    },
    // 导出数据字典接口
    exportData() {
      window.location.href = 'http://localhost/api/system/dict/exportData'
      this.$message({
        message: '文件已导出，请注意查看！',
        type: 'success'
      })
    },
  },
}


</script>


<style>


</style>